<script setup>
  import { useRouter } from 'vue-router'

  defineProps({
    blog:{
      type: Object,
      required: true
    }
  })
  const router = useRouter();
  const goTo = (id)=>{
    router.push({ name: `blog-detail`, params: { id } })
  };
</script>

<template>
  <div class="blog-card" @click="goTo(blog.id)">
    <h3 class="blog-title">{{blog.title}}</h3>
    <p class="blog-title">作者：{{blog.author}}|日期：{{blog.date}}</p>
    <!--    只展示前50个字，多余的字用省略号代替-->
    <p>{{blog.content.substring(0,50)}}...</p>
  </div>
</template>

<style scoped>
  .blog-card {
    border: 1px solid #000; /* 细线黑色边框，1px 宽度 */
    border-radius: 5px; /* 圆角半径为 5px */
    padding: 10px; /* 内部间距，防止内容紧贴边框 */
    margin: 10px; /* 外部间距，控制与页面其他元素之间的距离 */
  }

  /* 鼠标悬浮时的样式 */
  .blog-card:hover {
    background-color: #f0f0f0; /* 浅灰色背景 */
  }
</style>
